<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{margin: 0px; padding: 0px;}
			body{
				width: 100%;
				height: 100vh;
				background: url(imgs/bg.jpg) no-repeat;
				background-size: 100% 100%;
				overflow: hidden;
			}
			.balloon{
				width: 96px;
				height: 122px;
				/* border: 1px solid red; */
				position: absolute;
				left: 0px;
				top: 0px;
				background: url(imgs/balloon.png) no-repeat 0px 0px;
			}
			
			.box{
				width: 400px;
				height: 200px;
				border-radius: 30px;
				position: absolute;
				left: 50%;
				top: 50%;
				margin: -100px 0px 0px -200px;
				background: pink;
			}
			.box h1{
				color: white;
				padding: 0px 20px;
				font-size: 20px;
			}
			.box p{
				width: 100px;
				height: 40px;
				text-align: center;
				line-height: 40px;
				color: white;
				margin: 100px auto;
				background-color: orangered;
				font-weight: bold;
				cursor: pointer;
				user-select: none;
				/* display; */
			}
			.scroe{
				position: absolute;
				left: 10px;
				top: 10px;
				padding: 10px;
				color: white;
				background: #666;
				border-radius: 10px;
				font-weight: bold;
				font-size: 20px;
			}
			.countdown{
				position: absolute;
				right: 10px;
				top: 10px;
				padding: 10px;
				color: white;
				background: #666;
				border-radius: 10px;
				font-weight: bold;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<!-- <div class="balloon"></div> -->
		<!-- <div class="box">
			<h1>请点击开始游戏</h1>
			<p>EGGIN</p>
		</div> -->
		<!-- <div class="scroe">当前得分为：80</div> -->
		<!-- <div class="countdown">剩余时间为：80</div> -->
	</body>
</html>
<script>
	
	// 游戏: 方法：init（分数 时间 音乐）游戏开始   结束方法
	function Game(){
		this.scroeDom = null;
		//分数累加
		this.scroe = 0;
		
		this.countdownDom = null;
		this.boxDom = null;
		this.bgM = null;
		this.bombM = null;
		
		this.timerA = null;
		this.timerB = null;
		
		this.countdown = 3;
		
		//调用初始化
		this.init();
		
	};
	
	Game.prototype.init = function(){
		// 创建分数
		this.scroeDom = document.createElement('div');
		this.scroeDom.className = 'scroe';
		this.scroeDom.innerHTML = '当前得分为：' + this.scroe;
		document.body.appendChild(this.scroeDom);
		// 创建时间
		this.countdownDom = document.createElement('div');
		this.countdownDom.className = 'countdown';
		this.countdownDom.innerHTML = '剩余时间:' + this.countdown;
		document.body.appendChild(this.countdownDom);
		
		//按钮
		this.boxDom = document.createElement('div');
		this.boxDom.className = 'box';
		this.h1 = document.createElement('h1');
		this.h1.innerHTML = '请点击开始游戏';		
		this.p = document.createElement('p');
		this.p.innerHTML = 'EGGIN';
		this.boxDom.appendChild(this.h1);
		this.boxDom.appendChild(this.p);
		document.body.appendChild(this.boxDom);
		
		let that = this;
		//监听事件
		this.p.onclick = function(){
			// 调用游戏开始方法
			that.gameBegin();
			
		};
		
		//音频
		this.bgM = document.createElement('audio');
		this.bgM.src = 'imgs/bgm.mp3';
		// this.bgM.controls = true;
		document.body.appendChild(this.bgM);
		
		//音频
		this.bombM = document.createElement('audio');
		this.bombM.src = 'imgs/c.wav';
		// this.bombM.controls = true;
		document.body.appendChild(this.bombM);
		
	};
	
	// 游戏开始方法
	Game.prototype.gameBegin = function(){
		let that = this;
		//音乐响应起来
		this.bgM.play();
		
		//隐藏按钮
		this.boxDom.style.display = 'none';
		//创建气球
		this.timerA = setInterval(function(){
			new Balloon();
		}, 500);
		
		//倒计时开启
		this.timerB = setInterval(function(){
			
			that.countdown--;
			//验证
			if(that.countdown <= 0){
				//调用游戏结束方法
				that.gameover();
			}
			//设置
			that.countdownDom.innerHTML = '剩余时间:' + that.countdown;
			
		}, 1000);
	};
	
	// 游戏结束方法
	Game.prototype.gameover = function(){
		// 设置得分
		this.h1.innerHTML = '当前得分为：' + this.scroe;
		
		// 显示按钮
		this.boxDom.style.display = 'block';
		
		//停止音乐
		this.bgM.pause();
		
		//停止定时器
		clearInterval(this.timerA);
		clearInterval(this.timerB);
		
		//时间和分数归零
		this.scroe = 0;
		this.scroeDom.innerHTML = '当前得分为：' + this.scroe;
		this.countdown = 3;
		
		// 隐藏页面气球
		let aBalloon = document.querySelectorAll('.balloon');
		for(let i = 0; i < aBalloon.length; i++){
			// console.log('xxx');
			aBalloon[i].remove();
		}
		
	};
	
	//得到游戏实例：所有东西
	let game = new Game();
	
	// 气球: 方法：init  fly  die
	function Balloon(){
		//气球
		this.balloonDom = null;
		// 窗口大小
		this.windowW = window.innerWidth;
		this.windowH = window.innerHeight;
		
		// 随机的位置
		this.top = this.windowH - 122;
		this.left = parseInt(Math.random() * (this.windowW - 96));
		
		//分数 1-8
		this.scroe = parseInt(Math.random() * 8 + 1);
		// 根据上面的分数对应位置
		// 1 2 3 4    0123
		// 5 6 7 8    0123
		this.bgX = (this.scroe - 1) % 4;
		// 1234  0  5678 1
		this.bgY = this.scroe > 4 ? 1 : 0;
		
		// 运动相关属性
		this.timer = null;
		this.interval = 10;
		// 步长
		this.step = this.scroe / 2;
		
		// 初始化调用
		this.init();
		this.fly();
	};
	
	//原型方法
	Balloon.prototype.init = function(){
		
		// 创建元素
		this.balloonDom = document.createElement('div');
		this.balloonDom.className = 'balloon';
		// 随机位置
		this.balloonDom.style.top = this.top + 'px';
		this.balloonDom.style.left = this.left + 'px';
		// 背景设置
		this.balloonDom.style.backgroundPosition = `-${this.bgX * 96}px -${this.bgY * 122}px`;
		// 添加到页面
		document.body.appendChild(this.balloonDom);
		
		let that = this;
		//监听点击事件
		this.balloonDom.onclick = function(){
			//调用音效
			game.bombM.load();
			game.bombM.play();
			//死亡
			that.die();
			//算分数
			game.scroe += that.scroe;
			// console.log(game.scroe);
			game.scroeDom.innerHTML = '当前得分为：' + game.scroe;
			
		};
		
	};
	
	// 飞的方法
	Balloon.prototype.fly = function(){
		
		//桥接
		let that = this;
		// 开定时器
		this.timer = setInterval(function(){
			// 累加
			that.top -= that.step;
			//验证
			if(that.top <= -122){
				//去死
				that.die();
			};
			
			// 设置
			that.balloonDom.style.top = that.top + 'px';
			
		}, this.interval);
		
	};
	
	// 死亡方法
	Balloon.prototype.die = function(){
		//清除定时器，拉回，清除DOM元素
		clearInterval(this.timer);
		this.balloonDom.remove();
	};
	
	
	
	
	
	
</script>